<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container" style="display: flex;flex-direction: column;gap: 20px;">
      <el-card>
        <div slot="header" style="display: flex;justify-content:space-between;align-items: center;">
          <span>出库单详情</span>
          <el-button v-if="calculateStatus === 0" type="primary" size="mini" icon="el-icon-s-data" :loading="btn.computedLoading" @click="computed">计算</el-button>
          <el-button v-if="calculateStatus === 1" type="warning" size="mini" icon="el-icon-folder-delete" :loading="btn.cancelComputedLoading" @click="cancelComputed">取消计算</el-button>
        </div>
        <!--表格渲染-->
        <el-table ref="table" v-loading="loading1" :data="list1" size="small" style="width: 100%;margin-bottom: 10px;">
          <el-table-column prop="customerName" label="客户名称" />
          <el-table-column prop="partnerProductNo" label="客户物料编码" />
          <el-table-column prop="productNo" label="产品编号" />
          <el-table-column prop="materialName" label="物料名称" />
          <el-table-column prop="materialDescription" label="物料描述" />
          <el-table-column prop="qty" label="需求出库数量" />
          <el-table-column prop="expectedOutQty" label="预计出库数量" />
          <el-table-column label="差值数量">
            <template slot-scope="scope">
              <div
                style="font-weight: 600;"
                :style="{ color: (Number(scope.row.qty) - Number(scope.row.expectedOutQty)) === 0 ? '#00b42a' : (Number(scope.row.qty) - Number(scope.row.expectedOutQty)) > 0 ? '#f53f3f' : ''}"
              >
                {{ Number(scope.row.qty) - Number(scope.row.expectedOutQty) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="actualOutQty" label="实际出库数量" />
        </el-table>
        <!--分页组件-->
        <el-pagination
          :current-page="query1.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="query1.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </el-card>
      <el-card>
        <div slot="header">
          <span>计算后出库单任务</span>
        </div>
        <!--表格渲染-->
        <el-table ref="table" v-loading="loading2" :data="list2" size="small" style="width: 100%;margin-bottom: 10px;">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column prop="parentPalletCode" label="母托编码" />
          <el-table-column prop="productNo" label="物料编码" />
          <el-table-column prop="partnerProductNo" label="客户物料编码" />
          <el-table-column prop="batchCode" label="批次号" />
          <el-table-column prop="qty" label="数量" />
          <el-table-column prop="sources" label="来源" />
          <el-table-column prop="operation" label="操作" />
          <el-table-column prop="taskStart" label="任务起点" />
          <el-table-column prop="taskEnd" label="任务终点" />
          <el-table-column prop="status" label="任务状态">
            <template slot-scope="scope">
              {{ dict.label.allOrder_status[scope.row.status] }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="updateTime" label="修改时间" />
          <!-- <el-table-column label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" :disabled="scope.row.id === '' || scope.row.id === undefined" @click="checkDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <!--分页组件-->
        <el-pagination
          :current-page="query2.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="query2.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getListOneAPI, getListTwoAPI, computedAPI, cancelComputedAPI, checkCalcaluateAPI } from '@/api/work/outBoundOrderDetail'
export default {
  name: 'OutBoundOrderDetail',
  dicts: ['allOrder_status'],
  data() {
    return {
      query1: {
        current: 1,
        size: 10
      },
      query2: {
        current: 1,
        size: 10
      },
      list1: [],
      list2: [],
      loading1: false,
      loading2: false,
      total1: 0,
      total2: 0,
      btn: {
        computedLoading: false,
        cancelComputedLoading: false
      },
      outBoundOrderCode: '',
      calculateStatus: ''
    }
  },
  created() {
    this.outBoundOrderCode = this.$route.query.outBoundOrderCode
    this.query1.outBoundId = this.$route.query.outBoundId
    this.query2.outBoundId = this.$route.query.outBoundId
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      Promise.all([
        this.toQuery1(),
        this.toQuery2(),
        this.checkCalcaluate()
      ])
    },
    toQuery1() {
      this.query1.current = 1
      this.getList1()
    },
    async getList1() {
      this.loading1 = true
      const res = await getListOneAPI(this.query1)
      if (res.result === 'OK') {
        this.loading1 = false
        this.list1 = res.data.content
        this.total1 = res.data.totalElements
      } else {
        this.list1 = []
        this.total1 = 0
        this.loading1 = false
      }
    },
    toQuery2() {
      this.query2.current = 1
      this.getList2()
    },
    async getList2() {
      this.loading2 = true
      const res = await getListTwoAPI(this.query2)
      if (res.result === 'OK') {
        this.loading2 = false
        if (res.data.content[0] === null) {
          this.list2 = []
        } else {
          this.list2 = res.data.content
        }
        this.total2 = res.data.totalElements
      } else {
        this.list2 = []
        this.total2 = 0
        this.loading2 = false
      }
    },
    handleSizeChange1(e) {
      this.query1.size = e
      this.query1.current = 1
      this.getList1()
    },
    handleCurrentChange1(e) {
      this.query1.current = e
      this.getList1()
    },
    handleSizeChange2(e) {
      this.query2.size = e
      this.query2.current = 1
      this.getList2()
    },
    handleCurrentChange2(e) {
      this.query2.current = e
      this.getList2()
    },
    async checkCalcaluate() {
      const res = await checkCalcaluateAPI({
        outBoundOrderCode: this.outBoundOrderCode
      })
      this.calculateStatus = res.content[0].calculateStatus
    },
    async computed() {
      const submitForm = {
        isSort: true,
        outBoundId: this.$route.query.outBoundId
      }
      try {
        this.btn.computedLoading = true
        const res = await computedAPI(submitForm)
        if (res.result === 'OK') {
          this.$message.success('计算成功')
          this.calculateStatus = 1
          Promise.all([
            this.toQuery1(),
            this.toQuery2(),
            this.checkCalcaluate()
          ])
        } else {
          this.$message.warning(res.data)
        }
      } finally {
        this.btn.computedLoading = false
      }
    },
    async cancelComputed() {
      const submitForm = {
        isSort: true,
        outBoundId: this.$route.query.outBoundId
      }
      try {
        this.btn.cancelComputedLoading = true
        const res = await cancelComputedAPI(submitForm)
        if (res.result === 'OK') {
          this.$message.success('取消计算成功')
          this.calculateStatus = 0
          Promise.all([
            this.toQuery1(),
            this.toQuery2(),
            this.checkCalcaluate()
          ])
        } else {
          this.$message.warning(res.data)
        }
      } finally {
        this.btn.cancelComputedLoading = false
      }
    }
  }
}
</script>

<style scoped>
.diff-zero {
  color: #00b42a
}
.diff-positive {
  color: #f53f3f
}
</style>
